<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>大风车</title>
		<script src="../js/jquery-1.11.1.js"></script>
		<style>
			div{
				width: 100%;
				height: 5000px;
				background: #17ee00;
			}
			.imga{
				animation: dfc 1s linear infinite;
				width: 500px;
				height: 500px;
			}
			@keyframes dfc{
				0%{
					transform: translateY(50px) rotateY(90deg);
				}
				100%{
					transform: translateY(50px) rotateY(180deg);
				}
			}
		</style>
	</head>
	<body>
		<div>
			<img src="../img/I drive.jpg" alt="" />
			<button id="btn1">开转</button>
		</div>
		<script>
			//点击  开转  图片切换并且添加样式  .imga
			$("#btn1").click(function(){
				$("img").addClass("imga")
			});
		</script>
	</body>
</html>